<template>
  <ul class="fileListMenu">
    <!-- 列表项 -->
    <!-- 循环遍历fileListMenuData -->
    <!-- 点击时调用fileListMenuClick方法，传入id -->
    <li
      v-for="item of fileListMenuData"
      :key="item.id"
      @click="fileListMenuClick(item.id)"
    >
      <!-- 图标 -->
      <i :class="item.class"></i>
      <!-- 文本 -->
      <span>{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "FileListMenu",
  data() {
    return {
      // 母菜单列表
      fileListMenuData: require("@/assets/json/fileListMenu.json"),
    };
  },
  methods: {
    // 点击母菜单列表项时
    fileListMenuClick(id) {
      // 获取母元素列表
      const fileListMenu = document.querySelector(".fileListMenu");
      switch (id) {
        case 1:
          console.log("新建文件");
          // 显示设置名称
          //   this.showSetName = true;
          this.$store.commit("setShowSetName", true);
          // 设置名称模式为新建笔记
          //   this.setNameMode = 1;
          this.$store.commit("setSetNameMode", 1);
          // 隐藏列表
          // 设置列表默认高度
          fileListMenu.style.height = "";
          // 100毫秒后调用,这样才有动画效果
          setTimeout(() => {
            // 内边距设为空
            fileListMenu.style.padding = "";
            // 获取输入框焦点
            // console.log(document.querySelector(".setNameInput"));
            document.querySelector(".setNameInput").focus();
            // this.$refs.setNameInput.focus();
          }, 100);
          
          break;
        case 2:
          console.log("新建文件夹");
          // 显示设置名称
          //   this.showSetName = true;
          this.$store.commit("setShowSetName", true);
          // 设置名称模式为新建文件夹
          //   this.setNameMode = 0;
          this.$store.commit("setSetNameMode", 0);
          // 隐藏列表
          // 设置列表默认高度
          fileListMenu.style.height = "";
          // 100毫秒后调用,这样才有动画效果
          setTimeout(() => {
            // 内边距设为空
            fileListMenu.style.padding = "";
            // 获取输入框焦点
            // console.log(document.querySelector(".setNameInput"));
            document.querySelector(".setNameInput").focus();
            // this.$refs.setNameInput.focus();
          }, 100);
          break;
        case 3:
          console.log("粘贴");
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 母菜单列表
.fileListMenu {
  // 绝对定位
  position: absolute;
  // 默认位置
  top: 0;
  left: 0;
  // 默认宽高
  width: 110px;
  height: 0px;
  // 隐藏溢出
  overflow: hidden;
  // 背景颜色
  background-color: white;
  // 层级
  z-index: 10;
  // 动画
  transition: height 100ms ease-in-out 0s;
  // 阴影
  box-shadow: 0 0 15px #cccccc;
  // 圆角
  border-radius: 5px;
  // 列表项
  li {
    // 弹性盒
    display: flex;
    // 子元素垂直居中
    align-items: center;
    // 字体大小
    font-size: 14px;
    // 高度
    height: 30px;
    // 内边距
    padding: 0 5px;
    // 小手
    cursor: pointer;
    // 图标
    i {
      // 图标大小
      font-size: 20px;
      // 图标颜色
      color: #0497e6;
      margin-right: 5px;
    }
    // 单独修改粘贴图标样式
    .icon-niantie {
      font-size: 18px;
      margin-left: 2px;
    }
    // 鼠标移入时
    &:hover {
      // 背景颜色
      background-color: #e3f4fd;
    }
  }
}
</style>